<template>
  <div v-if="!this.$store.state.isLogin">
    <!-- 顶部 -->
    <van-nav-bar title="全部订单"
                 left-arrow
                 @click-left="onClickLeft" />
    <van-empty image="network"
               description="您好像还没有登录？" />
    <div class="btnBox">
      <van-button round
                  type="danger"
                  class="bottom-button"
                  to="/accountsign">去登录</van-button>
    </div>
  </div>
  <div v-else>
    <van-nav-bar title="全部订单"
                 left-arrow
                 @click-left="onClickLeft" />
    <div v-if="myGoodsList.length!=0"
         class="bgc">
      <van-swipe-cell v-for="(item,index) in myGoodsList"
                      :key="index"
                      class="animate__animated animate__backInLeft">
        <div id="Goods"
             @click="toDetails(item.goodsId)">
          <div class="goodsImg">
            <img :src="item.coverImgUrl"
                 alt="">
          </div>
          <div class="right">
            <p class="oneLine title">
              <span>{{item.name}}</span>
              <span class="price">
                <span class="yen">&yen;</span>
                <span>{{item.price}}</span>
              </span>
            </p>
            <p class="oneLine details">联系方式：{{item.tel=='undefined'?'12315':item.tel}}</p>
            <p class="oneLine details">配送地址：{{item.address}}</p>
            <p class="oneLine details createTime">下单时间：{{item.createTime|timeFormat('YYYY-MM-DD hh:mm:ss')}}</p>
          </div>
        </div>
        <template #right>
          <van-button square
                      text="去评价"
                      type="warning"
                      class="delete-button"
                      @click="toDetails(item.goodsId)" />
        </template>
      </van-swipe-cell>
    </div>
    <div v-else>
      <van-empty class="custom-image"
                 image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                 description="暂无订单" />
    </div>
  </div>
</template>

<script>
import { getMyGoods, getGoodsMsg } from "@/api/api";

export default {
  name: 'MineAllOrders',
  filters: {
    timeFormat: function (data, format) {
      let year = (data.getFullYear()).toString().padStart(2, "0")
      let month = (data.getMonth() + 1).toString().padStart(2, "0")
      let day = (data.getDate()).toString().padStart(2, "0")
      let hour = (data.getHours()).toString().padStart(2, "0")
      let minute = (data.getMinutes()).toString().padStart(2, "0")
      let sec = (data.getSeconds()).toString().padStart(2, "0")
      format = format.replace("YYYY", year).replace("MM", month).replace("DD", day).replace("hh", hour).replace("mm", minute).replace("ss", sec)
      return format
    }
  },
  data () {
    return {
      myGoodsList: [],
    }
  },
  created () {
    this.init()
  },
  methods: {
    onClickLeft () {
      if (this.$store.state.isClickAllOrder) {
        this.$router.push('/index/center')
      } else {
        this.$router.push('/index')
      }
    },
    toDetails (id) {
      this.$router.push({ path: '/goods', query: { goodsId: id } })
    },
    getQuery (url) {
      if (url.includes('?')) {
        let arr = url.split("?")[1].split("&")
        let obj = {}
        arr.forEach(function (val) {
          let jumpBoard = val.split("=")
          obj[jumpBoard[0]] = jumpBoard[1]
        })
        return obj
      }
    },
    init () {
      if(this.$store.state.isLogin){
        getMyGoods().then(res => {
          res.data.rows.forEach((element) => {
            if (element.goodsList.includes('?') && (this.getQuery(element.goodsList).id != undefined)) {
              getGoodsMsg(this.getQuery(element.goodsList).id).then(res => {
                this.myGoodsList.push(res.data.data)
                let date = new Date(element.createTime)
                date = new Date(date.getTime() - (13 * 60 * 60 * 1000))
                this.myGoodsList[this.myGoodsList.length - 1].createTime = date
                this.myGoodsList[this.myGoodsList.length - 1].address = element.address
                this.myGoodsList[this.myGoodsList.length - 1].tel = element.mobile
              })
            }
          })
        })
      }
    },
  }
}
</script>

<style lang='less' scoped>
#Goods {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  background-color: white;
  .goodsImg img {
    width: 100px;
  }
}
.right {
  flex-grow: 1;
  margin-left: 15px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
}
.details {
  color: #8b8888;
  font-size: 14px;
}
.price {
  display: flex;
  align-items: center;
  color: #ec0d0c;
}
.yen {
  margin-right: 1px;
  font-size: 14px;
}
.bgc {
  padding: 10px;
  min-height: calc(100vh - 46px);
  background-color: #f0f0f0;
}
.delete-button {
  margin-left: 5px;
  height: 100%;
  border-radius: 5px;
}
.van-button__text {
  font-size: 17px;
}
.btnBox {
  text-align: center;
}
.bottom-button {
  width: 80%;
  height: 40px;
}
/deep/.van-empty {
  padding: 100px 0;
}
</style>